<template>
  <div class="layui-container fly-marginTop">
    <div class="fly-panel fly-panel-user" pad20>
      <div class="layui-tab layui-tab-brief" lay-filter="user">
        <ul class="layui-tab-title">
          <li>
            <router-link :to="{name: 'login'}">登入</router-link>
          </li>
          <li class="layui-this">
            找回密码
            <!--重置密码-->
          </li>
        </ul>
        <div class="layui-form layui-tab-content" id="LAY_ucm" style="padding: 20px 0;">
          <div class="layui-tab-item layui-show">
            <div class="layui-form layui-form-pane">
              <form method="post">
                <div class="layui-form-item">
                  <label for="L_email" class="layui-form-label">邮箱</label>
                  <ValidationProvider v-slot="{errors}" rules="required|email">
                    <div class="layui-input-inline">
                      <input
                        v-model="username"
                        type="text"
                        name="email"
                        placeholder="请输入邮箱"
                        autocomplete="off"
                        class="layui-input"
                      />
                    </div>
                    <div class="layui-form-mid error">
                      {{errors[0]}}
                    </div>
                  </ValidationProvider>
                </div>
                <div class="layui-form-item">
                  <ValidationProvider v-slot="{errors}" rules="required|max:4">
                    <div class="layui-row">
                      <label for="L_vercode" class="layui-form-label">人类验证</label>
                      <div class="layui-input-inline">
                        <input
                          v-model="code"
                          type="text"
                          name="code"
                          placeholder="请输入验证码"
                          autocomplete="off"
                          class="layui-input"
                        />
                      </div>
                      <div class="layui-form-mid">
                        <span class="svg" v-html="svg"></span>
                      </div>
                    </div>
                    <div class="layui-form-mid error">{{errors[0]}}</div>
                  </ValidationProvider>
                </div>
                <div class="layui-form-item">
                  <button type="button" class="layui-btn" @click="submit">提交</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCode, forget } from '@/api/login'
export default {
  name: 'forget',
  data () {
    return {
      username: '',
      code: '',
      svg: ''
    }
  },
  mounted () {
    this._getCode()
  },
  methods: {
    _getCode () {
      getCode().then(res => {
        if (res.code === 200) {
          this.svg = res.data
        }
      })
    },
    submit () {
      forget({
        username: this.username,
        code: this.code
      }).then(res => {
        if (res.code === 200) {
          console.log(res)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .error {
    color: red;
  }
  .svg {
    position: relative;
    top: -4px;
  }
</style>
